<template>
<div class="wrapper">
    <div class="container-fluid myTables">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-phone p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.withdraw.history')}}</li>
                </ol>
            </div>
        </div>
        <div id="main" class="card-box txjl">
            <div class="card-title d-flex">
                <div class="form-inline">
                    <select class="custom-select mr-3" v-model="form.status">
                        <option value="" selected>{{$t('title.status')}}</option>
                        <option value="1">{{$t('title.status.todo')}}</option>
                        <option value="2">{{$t('title.status.success')}}</option>
                        <option value="3">{{$t('title.status.rejected')}}</option>
                    </select>
                    <span class="input-group mr-3">
                        <input type="text" class="form-control date-picker" v-model="form.start_time"
                               :placeholder="$t('label.withdraw.time')" readonly>
                        <span class="input-group-addon">-</span>
                        <input type="text" class="form-control date-picker" v-model="form.end_time"
                               :placeholder="$t('label.withdraw.time')" readonly>
                    </span>
                    <button class="btn btn-primary" @click="search()">{{$t('btn.search')}}</button>
                </div>
                <div class="toolbar ml-auto">
                    <router-link to="/withdraw/apply" class="btn btn-gradient">{{$t('btn.withdraw')}}</router-link>
                </div>
            </div>
            <table class="table table-striped table-hover table-sm txsqtable myhidden">
                <thead class="thead-light">
                <tr>
                    <th>{{$t('title.order.number')}}</th>
                    <th>{{$t('label.withdraw.amount')}}</th>
                    <th>{{$t('label.withdraw.owner')}}</th>
                    <th>{{$t('label.withdraw.bankcard')}}</th>
                    <th>{{$t('label.withdraw.account')}}</th>
                    <th>{{$t('title.status')}}</th>
                    <th>{{$t('label.withdraw.time')}}</th>
                    <th>{{$t('label.process.time')}}</th>
                </tr>
                </thead>
                <tbody>
                <tr class="hidden" aria-hidden="true" tabindex="-1"></tr>
                <tr v-for="withdraw in withdraws" :key="withdraw.id">
                    <th scope="row">{{withdraw.orderno}}</th>
                    <td>{{withdraw.usdnum}}</td>
                    <td>{{withdraw.accountname}}</td>
                    <td>{{withdraw.bankname}}</td>
                    <td>{{withdraw.accountnum}}</td>
                    <td>{{withdraw.status}}</td>
                    <td>{{withdraw.create_time}}</td>
                    <td>{{withdraw.update_time}}</td>
                </tr>
                </tbody>
            </table>
            <div class="comTable">
                <ul class="b_flex b_column">
                    <li class="b_flex b_wrap box-s" v-for="withdraw in withdraws" :key="withdraw.id">
                        <div class="w-10 b_flex b_topcenter fir_box">
                            <div class="b_flex w-8">
                                <span class="nr">{{$t('title.order.number')}}</span>
                                <p>{{withdraw.orderno}}</p>
                            </div>
                        </div>
                        <div class="w-36 je-w">
                            <div class="b_flex">
                                <span class="w-7">{{$t('label.withdraw.amount')}}</span>
                                <p>{{withdraw.usdnum}}</p>
                            </div>
                        </div>
                        <div class="w-64">
                            <div class="b_flex">
                                <span>{{$t('title.status')}}</span>
                                <p>{{withdraw.status}}</p>
                            </div>
                        </div>
                        <div class="w-10 b_flex b_topcenter sq-time">
                            <div class="b_flex w-10">
                                <span class="nr">{{$t('label.withdraw.time')}}</span>
                                <p>{{withdraw.create_time}}</p>
                            </div>
                        </div>
                        <div class="w-10 b_flex b_topcenter sq-time">
                            <div class="b_flex w-10">
                                <span class="nr">{{$t('label.process.time')}}</span>
                                <p>{{withdraw.update_time}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <Pagination :current="page.current"
                        :total-pages="page.totalPages"
                        :total-elements="page.totalElements"
                        :size="page.size"
                        @on-change="load"></Pagination>
        </div>
    </div>
</div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'

export default {
    name: "withdraw",
    components: {
        Pagination
    },
    data() {
        return {
            withdraws: [],
            page: {
                current: 1,
                totalPages: 1,
                totalElements: 0,
                size: 10
            },
            queryParams: {},
            form: {
                status: '',
                start_time: '',
                end_time: ''
            }
        }
    },
    created() {
        const vm = this;
        const vdata = localStorage.getItem("VueData");
        if (vdata) {
            let obj = JSON.parse(vdata);
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) vm[key] = obj[key]
            }
            localStorage.removeItem("VueData");
        }
        window.addEventListener("beforeunload", () => {
            localStorage.setItem("VueData", JSON.stringify(vm._data))
        })
        this.search();
        this.$nextTick(() => {
            $('.date-picker').datetimepicker({
                locale: this.$i18n.locale
            }).on('dp.change', function (e) {
                let name = $(this).attr('name');
                vm.form[name] = e.date.format($.fn.datetimepicker.defaults.format)
            });
        })
    },
    methods: {
        load(page) {
            const vm = this;
            const api = vm.api;
            const http = vm.$http;
            let params = {};
            if (page) {
                params.page = page;
            }
            if (this.queryParams.status) {
                params.status = this.queryParams.status;
            }
            if (this.queryParams.start_time) {
                params.start_time = this.queryParams.start_time;
            }
            if (this.queryParams.end_time) {
                params.end_time = this.queryParams.end_time;
            }

            http.get(api + 'OutMoney/getlist', {params})
                .then(function (response) {
                    const data = response.data;
                    if ('0' === data.code) {
                        vm.withdraws = data.data.list;
                        vm.page = {
                            current: +data.data.pagenum,
                            size: +data.data.sizepage,
                            totalElements: +data.data.count,
                            totalPages: +data.data.totalpage
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        search() {
            this.queryParams = this.form;
            this.load()
        }
    }
}
</script>
<route-meta>
    {
    "password": true
    }
</route-meta>
